<template>
  <div class="footer-nav">
    <router-link to="/home" class="nav-item" :class="{ active: activeTab === 'home' }" @click="setActiveTab('home')">
      <span class="icon">🏠</span>
      <span class="text">首页</span>
    </router-link>
    
    <router-link to="/category_homepage" class="nav-item" :class="{ active: activeTab === 'category_homepage' }" @click="setActiveTab('category_homepage')">
      <span class="icon">🍜</span>
      <span class="text">菜系</span>
    </router-link>
    
    <router-link to="/uploadRecipe" class="nav-item add-button" :class="{ active: activeTab === 'uploadRecipe' }" @click="setActiveTab('uploadRecipe')">
      <span class="icon">➕</span>
    </router-link>
    
    <router-link to="/myFavorite" class="nav-item" :class="{ active: activeTab === 'myFavorite' }" @click="setActiveTab('myFavorite')">
      <span class="icon">❤️</span>
      <span class="text">收藏</span>
    </router-link>
    
    <router-link to="/profile" class="nav-item" :class="{ active: activeTab === 'profile' }" @click="setActiveTab('profile')">
      <span class="icon">👤</span>
      <span class="text">我的</span>
    </router-link>
  <!-- <van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="wap-home-o" @click="setActiveTab('home')">首页</van-tabbar-item>
  <van-tabbar-item name="search" icon="apps-o" @click="setActiveTab('search')">菜系</van-tabbar-item>
  <van-tabbar-item name="add" icon="add-o" @click="setActiveTab('search')"></van-tabbar-item>
  <van-tabbar-item name="friends" icon="like-o" @click="setActiveTab('friends')">收藏</van-tabbar-item>
  <van-tabbar-item name="setting" icon="user-o"  @click="setActiveTab('profile')">我的</van-tabbar-item>
  </van-tabbar> -->

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';

// const active = ref();
const router=useRouter()
const route = useRoute();
const activeTab = ref(getInitialTab());

function getInitialTab() {
  const path = route.path;
  if (path.includes('home')) return router.push({name:'home'});
  if (path.includes('category_homepage')) return router.push({name:'category_homepage'});
  if (path.includes('uploadRecipe')) return router.push({name:'uploadRecipe'});
  if (path.includes('myFavorite')) return router.push({name:'myFavorite'});
  if (path.includes('profile')) return 'profile';
  // return router.push({name:'home'});
}

function setActiveTab(tab) {
  activeTab.value = tab;
}
</script>

<style scoped>
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  flex: 1;
  height: 100%;
}

.nav-item.active {
  color: #ff6b6b;
}

.icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.add-button {
  position: relative;
}

.add-button .icon {
  background-color: #ff6b6b;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3);
}

.add-button.active .icon {
  background-color: #ff5252;
}

.text {
  margin-top: 5px;
}
</style>
